<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*游戏界面*/
        #wrap{
            width: 343px;
            height: 480px;
            background: url('bg.jpg');
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        /*得分*/
        #score_box{
            width: 56px;
            height: 39px;
            position: absolute;
            left: calc(50% - 28px);
            top: 30px;
            font-size: 0;
            z-index: 100;
        }
        /*开场动画*/
        #flash{
            width: 236px;
            height:  77px;
            background: url('head.jpg');
            position: absolute;
            left: calc(50% - 118px);
            top: 90px;
            animation: flash 1s infinite alternate;
        }
        @keyframes flash{
            from{
                top: 90px;
            }to{
                top: 120px;
            }
        }
        #flash div{
            width: 40px;
            height: 26px;
            background: url('bird0.png');
            position: absolute;
            right: 0;
            top: 18px;
            animation: birdFly 0.5s infinite;
        }
        @keyframes birdFly{
            from{
                background: url('bird0.png');
            }to{
                background: url('bird1.png');
            }
        }
        /*开始按钮*/
        #start_btn{
            width: 85px;
            height: 29px;
            background: url('start.jpg');
            position: absolute;
            left: calc(50% - 43px);
            top: 300px;
        }
        /*马路*/
        #banner{
            width: 686px;
            height: 14px;
            position: absolute;
            background: url(banner.jpg);
            left: 0;
            bottom: 43px;
            animation: run 1s infinite linear;
        }
        @keyframes run{
            from{
                left: 0;
            }to{
                left: -343px;
            }
        }
        /*小鸟*/
        #bird{
            width: 40px;
            height: 30px;
            position: absolute;
            left: 30px;
            top: 30px;
            display: none;
        }
        /*小鸟死亡样式*/
        .die{
            top: 393px !important;
            transition: all .5s linear;
        }
        .pipe{
            width: 62px;
        }
        .pipe_t_box{
            /*height: 100px;*/
            position: absolute;
            left: 418px;
            top: 0;
            background: url(up_mod.png);
        }
        .pipe_t_box img{
            position: absolute;
            bottom: 0;
        }
        .pipe_b_box{
            /*height: 100px;*/
            position: absolute;
            left: 418px;
            bottom: 57px;
            background: url(down_mod.png);
        }
        .pipe_b_box img{
            position: absolute;
            top:0;
        }
    </style>
</head>
<body>
    <!-- 游戏界面 -->
    <div id="wrap">
        <!-- 得分 -->
        <div id="score_box">
            <img src="0.jpg" id="ten">
            <img src="0.jpg" id="one">
        </div>
        <!-- 开场动画 -->
        <div id="flash">
            <!-- <img src="bird0.png" alt=""> -->
            <div></div>
        </div>
        <!-- 开始按钮 -->
        <div id="start_btn"></div>
        <!-- 马路 -->
        <div id="banner"></div>
        <!-- 游戏开始后的小鸟 -->
        <img src="down_bird0.png" id="bird">
        <!-- 柱子的模板 -->
        <!-- <div class="pipe_t_box pipe">
            <img src="up_pipe.png" alt="">
        </div>
        <div class="pipe_b_box pipe">
            <img src="down_pipe.png" alt="">
        </div> -->
    </div>
</body>
<script>
    //小鸟运动最大范围值
    var maxH = 393;
    // 小鸟运动的计时器
    var birdTimer;
    // 小鸟运动的速度
    var speed = 0;
    // 管到高度范围：  min 69  max 393-60
    var blank = 100;
    var maxPipe = 393-60-blank;
    var minPipe = 60;
    // 获取页面中所有的管道(会动态改变)
    var pipes  = document.getElementsByClassName("pipe");
    // Defen 
    num= 0;
    //开始按钮
    start_btn.onclick = function(e){
        var e = e || window.event;
        if (e.stopPropagation) {
            e.stopPropagation();
        }else{
            e.cancleBubble = true;
        }
        // 隐藏开始按钮
        this.style.display = "none";
        // 隐藏开始动画
        flash.style.display = "none";
        // 显示小鸟
        bird.style.display = "block";
        birdFly();
        var pipeTimer = setInterval(createPipe,2500);
    }

    // 小鸟运动的函数
    function birdFly(){
        birdTimer = setInterval(function(){
            // 获取小鸟当前位置
            var t = bird.offsetTop;
            // 速度发生改变（小鸟并非匀速下落）
            speed+=0.5;
            // 对速度进行限制
            if (speed >= 10) {
                speed = 10;
            }
            // 切换小鸟飞行状态
            if (speed > 0) {
                // 说明小鸟在向下运动
                bird.src = "down_bird0.png";
            }else{
                // 小鸟在向上运动
                bird.src = "up_bird0.png";
            }
            // 改变位置
            t+= speed;
                // 对小鸟运动范围判断
            if (t <= 0) {
                t = 0;
            }
            if (t >= maxH) {
                t = maxH;
                clearInterval(birdTimer);
            }
            bird.style.top = t + "px";

            // 判断碰撞
            for(var i = 0 ; i < pipes.length ; i++){
                if (isCrash(bird,pipes[i])) {
                    // 如果碰撞游戏结束
                    // 小鸟死亡样式
                    bird.className = "die";
                    // 关闭马路动画
                    banner.style.animationPlayState = "paused";
                    // 关闭页面中所有正在运行的计时器
                    clearTimer();
                }
            }

        },30)
    }

    // 小鸟起飞  当点击开始按钮发现小鸟向上飞一下原因是事件事件冒泡 需要阻止
    document.onclick = function(){
        speed = -7;
    }

    // 创建管道的函数
    function createPipe(){
        var flag = true;
        // 上管道
        var pipeUp = document.createElement("div");
        // 记录管道是否加过分数
        
        pipeUp.className = "pipe_t_box pipe";
        // 为管到设置高度
        var upHeight = randomNum(minPipe,maxPipe);
        pipeUp.style.height = upHeight + "px";
        var imgUp = new Image();
        imgUp.src = "up_pipe.png";
        pipeUp.appendChild(imgUp);

        // 下管道
        var pipeDown = document.createElement("div");
        pipeDown.className = "pipe_b_box pipe";
        // 为下管道设置高度
        pipeDown.style.height = maxH - upHeight - blank +"px";
        var imgDown = new Image();
        imgDown.src = "down_pipe.png";
        pipeDown.appendChild(imgDown);

        wrap.appendChild(pipeUp);
        wrap.appendChild(pipeDown);

        // 管道运动
        var timer = setInterval(function(){
            // 获取管道位置
            var l = pipeDown.offsetLeft;
            if (flag) {
                if (bird.offsetLeft > pipes[0].offsetLeft+ pipes[0].offsetWidth) {
                getNum();
                // 标记为不可再加分
                flag = false;
                }
            }
            // 改变管道位置
            l-=3;
            pipeUp.style.left = l + "px";
            pipeDown.style.left = l + "px";
            // 运动范围进行判断
            if (l <= -70) {
                clearInterval(timer);
                // 清除管道
                pipeUp.remove();
                pipeDown.remove()
            }
        },30)
    }
    // 碰撞检测的函数
    function isCrash(b,p){
        // 获得元素位置
        var bl = b.offsetLeft;
        var bt = b.offsetTop;
        var br = bl + b.offsetWidth;
        var bb = bt + b.offsetHeight;

        var pl = p.offsetLeft;
        var pt = p.offsetTop;
        var pr = pl + p.offsetWidth;
        var pb = pt + p.offsetHeight;

        // 对位置关系进行判断
        if (bl>pr || bt > pb || br < pl || bb < pt) {
            return false;
        }else{
            // 一定碰撞了
            return true;
        }
    }

    // 关闭页面中所有计时器
    function clearTimer(){
        // 为了确定当前页面中已经开启多少个计时器
        // var x ;
        // setInterval(function(){
        //         var x = setInterval(function(){},1)
        // },1)
            for(var i = 0 ; i <= 10000;i++){
                clearInterval(i);
            }
    }

    // 得分函数
    function getNum(){
        // 得分加1
        num++;
        if (num < 10) {
            one.src = num+".jpg";
        }else{
            // 十位数图片
            ten.src = parseInt(num/10)+".jpg";
            // 个位数图片
            one.src = num%10 +".jpg";

        }
        
    }
    // 随机数函数
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
</script>
</html>
